<template>
  <div class="dialog-warp" v-if="isShow">
    <div class="content">
      <div class="input">
        <input
          @keyup.enter="add"
          type="text"
          v-model="url"
          placeholder="请输入网址"
          :disabled="isSubmit"
        />
      </div>
      <div class="button">
        <button @click="add" :disabled="isSubmit">添加</button>
        <button @click="close" :disabled="isSubmit">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue'
import useWebsiteStore from '@/stores/websiteStore'

const websiteStore = useWebsiteStore()
const { isShow, setIsShow } = inject('dialogVisiable')
const url = ref('')

const isSubmit = ref(false)

async function add() {
  isSubmit.value = true
  const res = await myApi.sendUrl(url.value)
  if (res.msg) {
    myApi.alert(res.msg)
  } else {
    websiteStore.add(res)
  }
  isSubmit.value = false
  url.value = ''
  setIsShow(false)
}

function close() {
  url.value = ''
  setIsShow(false)
}
</script>

<style lang="stylus" scoped>
.dialog-warp
  height 100%
  padding-left 20px
  position absolute
  top 0
  left 0
  right 0
  botton 0
  background rgba(0,0,0,0.8)
  display flex
  justify-content center
  align-items center
  z-index 2
  .content
     width 100%
     pading 0 20px
     input
       height 30px
       width 100%
       outline none
       margin-bottom 10px
       font-size 12px
     .btns
       button
         height 30px
         maring-right 10px
         font-size 12px
         padding 0 20px
</style>
